<template>
  <el-dialog 
    class="edit-dialog"
    :visible.sync="isVisible"
    :close-on-click-modal="false"
    :title="title"
    width="600px">
    <el-form
      ref="editForm"
      :model="editForm"
      :rules="rules"
      autocomplete="off"
      label-position="right" 
      label-width="100px"
    >
      <el-form-item prop="label" label="菜单名称">
        <el-input
          ref="label"
          v-model="editForm.label"
          placeholder="请输入菜单名称"
          name="label"
          type="text"
        />
        
      </el-form-item>
      <el-form-item prop="parentIds" label="上级菜单">
        <el-cascader
          v-model="editForm.parentIds"
          :options="menuItems"
          :props="{ checkStrictly: true, value: 'id' }"
          clearable></el-cascader>
      </el-form-item>
      <el-form-item prop="path" label="路由地址">
        <el-input
          ref="path"
          v-model="editForm.path"
          placeholder="请输入路由地址"
          name="path"
          type="text"
        />
      </el-form-item>
      <el-form-item prop="icon" label="菜单图标">
        <el-input
          ref="icon"
          v-model="editForm.icon"
          placeholder="请输入菜单图标"
          name="icon"
          type="text"
        />
      </el-form-item>
      <el-form-item prop="sortValue" label="排序">
        <el-input
          ref="sortValue"
          v-model="editForm.sortValue"
          placeholder="请输入排序号"
          name="sortValue"
          type="text"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="medium" @click="isVisible=false">取 消</el-button>
      <el-button size="medium" type="primary" :loading="submitLoading" @click="editSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {insertMenu, updateMenu} from '@/http/apiUrls.js';

export default {
  name: 'EditForm',
  props: {
    // 弹窗显示
    dialogVisible: { type: Boolean, default: false},
    // 弹窗类型
    type: { type: String, default: "add" },
    // 菜单数据
    menuItems: {type: Array, default: []}
  },
  computed: {
    // 控制显示
    isVisible: {
      get() { 
        return this.dialogVisible; 
      },
      set() {
        this.$emit('close')
        this.$refs.editForm.resetFields();
        this.editForm = this.initEditObj()
      }
    },
    // 标题
    title:{
      get(){
        if(this.type == 'add'){
          return '添加菜单'
        }else{
          return '修改菜单'
        }
      }
    },
    menuOptions:{
      get(){
        let items = this.menuItems;

      }
    }
  },
  data() {
    return {
      submitLoading:false,
      editForm: this.initEditObj(),
      rules: {
        label: {
          required: true,
          message: '请输入菜单名称',
          trigger: "blur"
        },
        path: {
          required: true,
          message: '请输入路由地址',
          trigger: "blur"
        }
      },
    }
  },
  methods: {
    // 修改传递值
    setEditObj(val) {
      console.log(val);
      this.editForm = {...val};
    },
    // 重置值
    initEditObj(){
      return {
        label: "",
        path: "",
        icon: "",
        sortValue: 0,
        parentIds: []
      }
    },
    editSubmit(){
       this.$refs.editForm.validate(valid => {
        if (valid) {
          if(this.type === 'add'){
            this.insert()
          }else{
            this.edit()
          }
        } else {
          return false;
        }
      });
    },
    insert(){
      let requestData = this.editForm;
      const ids = requestData.parentIds;
      if(ids && ids.length > 0){
        requestData.parentId = ids[ids.length-1]
      }
      this.submitLoading = true;
      this.$postJson(insertMenu, requestData).then(res => {
        this.submitLoading = false;
        if(res){
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.isVisible = false;
          this.$emit('success')
        }
      })
    },
    edit(){
      let requestData = this.editForm;
      const ids = requestData.parentIds;
      if(ids && ids.length > 0){
        requestData.parentId = ids[ids.length-1]
      }
      this.submitLoading = true;
      this.$postJson(updateMenu, requestData).then(res => {
        this.submitLoading = false;
        if(res){
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.isVisible = false;
          this.$emit('success')
        }
      })
    }
  }
}
</script>
<style lang="scss">
.edit-dialog{
  .el-dialog__header{
    padding: 15px 20px 15px;
    .el-dialog__title{
      color: #fff;
    }

    i{
      color: #fff;
    }
    
    background-color: #006ACC;
  }

  .el-dialog__footer{
    padding: 15px 20px 15px;
    border-top: 1px solid #dfe4ea;
  }
}

</style>